<template>
	<div class="workflow-drawer-node">
		<el-tabs type="border-card" v-model="tabsActive">
			<!-- 节点编辑 -->
			<el-tab-pane label="节点编辑" name="1">
				<el-scrollbar>
					<el-form :model="node" :rules="nodeRules" ref="nodeFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
						<el-form-item label="数据id" prop="id">
							<el-input v-model="node.id" placeholder="请输入数据id" clearable disabled></el-input>
						</el-form-item>
						<el-form-item label="节点id" prop="nodeId">
							<el-input v-model="node.nodeId" placeholder="请输入节点id" clearable disabled></el-input>
						</el-form-item>
						<el-form-item label="类型" prop="type">
							<el-input v-model="node.type" placeholder="请输入类型" clearable disabled></el-input>
						</el-form-item>
						<el-form-item label="left坐标" prop="left">
							<el-input v-model="node.left" placeholder="请输入left坐标" clearable disabled></el-input>
						</el-form-item>
						<el-form-item label="top坐标" prop="top">
							<el-input v-model="node.top" placeholder="请输入top坐标" clearable disabled></el-input>
						</el-form-item>
						<el-form-item label="icon图标" prop="icon">
							<el-input v-model="node.icon" placeholder="请输入icon图标" clearable></el-input>
						</el-form-item>
						<el-form-item label="名称" prop="name">
							<el-input v-model="node.name" placeholder="请输入名称" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button class="mb15" @click="onNodeRefresh">
								<SvgIcon name="ele-RefreshRight" />
								重置
							</el-button>
							<el-button type="primary" class="mb15" @click="onNodeSubmit">
								<SvgIcon name="ele-Check" />
								保存
							</el-button>
						</el-form-item>
					</el-form>
				</el-scrollbar>
			</el-tab-pane>

			<!-- 扩展表单 -->
			<el-tab-pane label="扩展表单" name="2">
				<el-scrollbar>
					<el-form :model="form" ref="extendFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
						<el-form-item
							:label="val.label"
							:prop="val.prop"
							v-for="(val, key) in node.from"
							:key="key"
							:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
						>
							<el-input
								v-model="form[val.prop]"
								:placeholder="val.placeholder"
								clearable
								v-if="val.type === 'input'"
								:disabled="val.disabled"
							></el-input>
							<el-select v-model="form[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
								<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
							<el-checkbox-group v-model="form[val.prop]" v-if="val.type === 'checkbox'" :disabled="val.disabled">
								<el-checkbox label="美食推荐" name="type"></el-checkbox>
								<el-checkbox label="统计分析" name="type"></el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item>
							<el-button class="mb15" @click="onExtendRefresh">
								<SvgIcon name="ele-RefreshRight" />
								重置
							</el-button>
							<el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="loading.extend">
								<SvgIcon name="ele-Check" />
								保存
							</el-button>
						</el-form-item>
					</el-form>
				</el-scrollbar>
			</el-tab-pane>

			<!-- 图表可视化 -->
			<el-tab-pane label="图表可视化" name="3">
				<el-scrollbar>
					<div class="flex-content-right">
						<div style="height: 200px; width: 320px" ref="chartsMonitorRef"></div>
					</div>
				</el-scrollbar>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, nextTick, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';

// 定义接口来定义对象的类型
interface WorkflowDrawerNodeState {
	node: { [key: string]: any };
	nodeRules: any;
	form: any;
	tabsActive: string;
	loading: {
		extend: boolean;
	};
}

export default defineComponent({
	name: 'pagesWorkflowDrawerNode',
	setup(props, { emit }) {
		const { proxy } = <any>getCurrentInstance();
		const nodeFormRef = ref();
		const extendFormRef = ref();
		const chartsMonitorRef = ref();
		const state = reactive<WorkflowDrawerNodeState>({
			node: {},
			nodeRules: {
				id: [{ required: true, message: '请输入数据id', trigger: 'blur' }],
				nodeId: [{ required: true, message: '请输入节点id', trigger: 'blur' }],
				type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
				left: [{ required: true, message: '请输入left坐标', trigger: 'blur' }],
				top: [{ required: true, message: '请输入top坐标', trigger: 'blur' }],
				icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
			},
			form: {
				module: [],
			},
			tabsActive: '1',
			loading: {
				extend: false,
			},
		});
		// 获取父组件数据
		const getParentData = (data: object) => {
			state.tabsActive = '1';
			state.node = data;
			initChartsMonitor();
		};
		// 节点编辑-重置
		const onNodeRefresh = () => {
			state.node.icon = '';
			state.node.name = '';
		};
		// 节点编辑-保存
		const onNodeSubmit = () => {
			nodeFormRef.value.validate((valid: boolean) => {
				if (valid) {
					emit('submit', state.node);
					emit('close');
				} else {
					return false;
				}
			});
		};
		// 扩展表单-重置
		const onExtendRefresh = () => {
			extendFormRef.value.resetFields();
		};
		// 扩展表单-保存
		const onExtendSubmit = () => {
			extendFormRef.value.validate((valid: boolean) => {
				if (valid) {
					state.loading.extend = true;
					setTimeout(() => {
						state.loading.extend = false;
						ElMessage.success('保存成功');
						emit('close');
					}, 1000);
				} else {
					return false;
				}
			});
		};
		// 图表可视化-初始化
		const initChartsMonitor = () => {
			const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
			const numsOne = [];
			const numsTwo = [];
			for (let i = 0; i < 7; i++) {
				numsOne.push(`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(Math.random() * 52 + 1)}`);
				numsTwo.push(Math.floor(Math.random() * 52 + 1));
			}
			const option = {
				grid: {
					top: 50,
					right: 30,
					bottom: 30,
					left: 50,
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: numsOne,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						itemStyle: {
							color: '#289df5',
							borderColor: '#289df5',
							areaStyle: {
								type: 'default',
								opacity: 0.1,
							},
						},
						data: numsTwo,
						type: 'line',
						areaStyle: {},
					},
				],
			};
			myChart.setOption(option);
			nextTick(() => {
				myChart.resize();
			});
		};
		return {
			nodeFormRef,
			extendFormRef,
			chartsMonitorRef,
			getParentData,
			onNodeRefresh,
			onNodeSubmit,
			onExtendRefresh,
			onExtendSubmit,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.workflow-drawer-node {
	::v-deep {
		.el-tabs {
			box-shadow: unset;
			border: unset;
			.el-tabs__nav {
				display: flex;
				width: 100%;
				.el-tabs__item {
					flex: 1;
					padding: unset;
					text-align: center;
					&:first-of-type.is-active {
						border-left-color: transparent;
					}
					&:last-of-type.is-active {
						border-right-color: transparent;
					}
				}
			}
			.el-tabs__content {
				padding: 0;
				height: calc(100vh - 90px);
				.el-tab-pane {
					height: 100%;
				}
			}
		}
	}
}
</style>
